<template>
    <div class="container">
        <ul>
            <li>vue3 & springboot</li>
            <li>本站已运行 : <span style="color: black; font-size: large; font-weight: bolder;">{{ date }}</span> </li>
            <li>
                <a href="https://beian.miit.gov.cn/" style="font-weight: 2;">豫ICP备2024093375号</a>
                &nbsp;
                <span style="font-weight: 2;">
                    <img src="/public/image/beian.png" style="width: auto; max-height: 1rem;;">
                    豫公网安备41160302000121</span>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let date = ref('')

function getData() {
    const startDate: any = new Date(2024, 11 - 1, 21);
    const now: any = new Date();
    const diff = now - startDate;
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
    date.value = days+'天 '+hours+'小时 '+minutes+'分钟 '+seconds+'秒'
}

// var intervalId = setInterval(() => { date.value = new Date().toLocaleTimeString() }, 1000); 得到了当前时间
setInterval(getData, 1000);


</script>

<style scoped>
.container {
    padding-top: 1%;
    height: 100%;
    /* background-color: rgb(237, 237, 240); */
    background-color: bisque;
    padding-bottom: 1%;
}

ul {
    display: flex;
    flex-direction: column;
    /* 设置为列布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    list-style-type: none;
    /* 去除列表项前的标记 */
    padding: 0;
    /* 移除默认的内边距 */
    margin: 0;
    /* 移除默认的外边距 */
    width: 100%;
    /* 设置宽度为100% */
    height: 100%;
    /* 设置高度为100% */
}

ul li {
    color: rgb(30, 31, 32);
    padding-top: 0.4rem;
    font-weight: 2;
}
</style>